<template>
	<navBar :isBar="isBar" v-if="isNav"></navBar>
	<router-view @isBar="setBar" @isNav="setNav" @loading="setLoading"> </router-view>
	<tabBar v-if="isBar" class="tab_bar"></tabBar>
	<loading :is-loading="isLoading"></loading>
</template>
<script setup>
import navBar from '@/components/navBar/index.vue';
import tabBar from '@/components/tabBar/index.vue';
import loading from '@/components/loading/index.vue'
import { watch, reactive, toRefs, getCurrentInstance } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const data = reactive({
	isBar: true,
	isNav: false,
	isLoading: true,
});
const { isBar, isNav, isLoading } = toRefs(data);

const setLoading = () => {
	data.isLoading = false;
};
const setBar = () => {
	data.isBar = false;
};
const setNav = () => {
	data.isNav = true;
};
watch(
	//当route.path改变时
	() => route.path,
	() => {
		data.isBar = true;
		data.isNav = false;
		data.isLoading = true;
	}
);
</script>
<style lang="scss">
#app {
	min-height: 100vh;
	.van-tabbar--fixed {
		bottom: -1px;
	}
}
:root {
	--van-dialog-width: 280px !important;
	--van-dialog-header-padding-top: 20px !important;
}
.van-dialog__content {
	padding-top: 20px;
}
</style>
